:host {
  display: block;
  height: 100%;
}
.split-wrapper {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;

  .scalable {
    position: relative;
  }

  .separator {
    position: relative;
    background: #f8f8f9;
    transition: all 0.1s;
    display: flex;

    &:hover {
      background-color: #68be8d;
    }

    &.row {
      width: var(--separator-height);
      cursor: col-resize;
      .trigger-bar-con {
        top: 50%;
        left: 2px;
        height: var(--separator-height);
        display: flex;
        align-items: center;
        transform: translate(-50%) rotate(90deg);
      }
    }
    &.column {
      height: var(--separator-height);
      cursor: row-resize;
      .trigger-bar-con {
        left: 50%;
        // height: 100%;
        // transform: translate(-50%);
      }
    }

    .trigger-bar-con {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    i {
      height: 2px;
      width: 2px;
      border-radius: 2px;
      display: inline-block;
      margin: 0 1px;
      background: rgba(23, 35, 61, 0.25);
    }
  }

  .right-content {
    flex: auto;
  }

  .left-content,
  .right-content {
    overflow: auto;
  }
}
